/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

// eslint-disable-next-line no-use-before-define, @typescript-eslint/no-use-before-define
import React, { PureComponent } from 'react';
import { Menu, Icon, Spin, Dropdown, Divider, Row, Col } from 'antd';
import Debounce from 'lodash-decorators/debounce';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Link } from 'dva/router';
// eslint-disable-next-line import/no-extraneous-dependencies
import { connect } from 'dva';
import Advertisement from '@/components/Advertisement';
import GpAuthPrompt from '@/components/_pages/Allocation/components/GpAuthPrompt/index';
import styles from './index.less';

const { MODE_ENV } = process.env;
const isAutomaticLocal = MODE_ENV === 'AUTOMATIC';

@connect(({ setting, user, router }) => ({
  user_info: user.currentUser.user_info,
  location: router.location,
  ...setting,
}))
export default class GlobalHeader extends PureComponent {
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }

  // eslint-disable-next-line react/sort-comp
  toggle = () => {
    const { collapsed, onCollapse } = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };

  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }

  onClickExcel = () => {
    this.setState({
      downloadUrl: '//software.kuaidihelp.com/tongchengcaozuoshouce.docx',
    });
  };

  render() {
    const {
      collapsed,
      isMobile,
      logo,
      onMenuClick,
      companyData = {},
      options: { key, subKey },
      user_info: { branchLevel, realAccount } = {},
    } = this.props;
    const isYjy = key === 'yjy';
    const showEdition = (isYjy && branchLevel == 3) || !isYjy;
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        {showEdition && (
          <Menu.Item key="info">
            <Icon type="user" />
            公司信息
          </Menu.Item>
        )}
        {showEdition && <Menu.Divider />}
        <Menu.Item key="logout">
          <Icon type="logout" />
          退出登录
        </Menu.Item>
      </Menu>
    );
    const isZyAccount = key === 'post'; //是否是中邮账号
    const isTongDi = subKey == 'td';
    return (
      <div className={styles.header}>
        {isMobile && [
          <Link to="/" className={styles.logo} key="logo">
            <img src={logo} alt="logo" width="32" />
          </Link>,
        ]}
        <Icon
          className={styles.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.toggle}
        />
        {!isZyAccount &&
          !isTongDi && (
            <div className={styles.advertise}>
              <Advertisement
                position="left"
                type="news"
                width="712"
                height="52"
                detailPath="/news"
              />
            </div>
          )}
        {isTongDi && (
          <Row type="flex" justify="end" style={{ flex: 1 }}>
            <Col>
              <Link to="/Guide">网站导航</Link>
            </Col>
          </Row>
        )}
        {/* 自动化本地访问需去掉 */}
        {!isAutomaticLocal && (
          <div className={styles.right}>
            {companyData && companyData.user_info.phone ? (
              <Dropdown overlay={menu}>
                <div className={`${styles.action} ${styles.account}`}>
                  <div className={styles.name}>
                    <div>
                      {!!isZyAccount ? companyData.user_info.shortName : companyData.user_info.name}
                    </div>
                    {realAccount != 2 && (
                      <>
                        <div>
                          {companyData.user_info.name && <Divider type="vertical" key="line" />}
                        </div>
                        <div>
                          {!!isZyAccount ? companyData.user_info.name : companyData.user_info.phone}
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </Dropdown>
            ) : (
              <Spin size="small" style={{ marginLeft: 8 }} />
            )}
          </div>
        )}
        <GpAuthPrompt />
      </div>
    );
  }
}

GlobalHeader.defaultProps = {
  showAdv: false,
};
